<template>
  <cc-dialog ref="showDialog" :title="`${msg}`" @submit="save">
    <div class="col">
      <q-toolbar class="bg-primary text-white shadow-2">
        <q-toolbar-title class="text-subtitle2">未选择</q-toolbar-title>
      </q-toolbar>
      <q-list bordered separator>
        <q-item
          v-for="item in unselectedList"
          :key="item.value"
          clickable
          v-ripple
          :active="link === item.value"
          @click="link = item.value"
          @dblclick="select()"
        >
          <q-item-section>{{ item.label }}</q-item-section>
        </q-item>
      </q-list>
    </div>
    <div class="column justify-center">
      <q-btn flat color="primary" @click="select()" icon="mdi-arrow-right" />
      <q-btn
        flat
        color="primary"
        @click="selectAll()"
        icon="mdi-arrow-right-thick"
      />
      <q-btn flat color="primary" @click="unselect()" icon="mdi-arrow-left" />
      <q-btn
        flat
        color="primary"
        @click="unselectAll()"
        icon="mdi-arrow-left-thick"
      />
    </div>
    <div class="col">
      <q-toolbar class="bg-primary text-white shadow-2">
        <q-toolbar-title class="text-subtitle2">已选择</q-toolbar-title>
      </q-toolbar>
      <q-list bordered separator>
        <q-item
          v-for="item in selectList"
          :key="item.value"
          clickable
          v-ripple
          :active="link === item.value"
          @click="link = item.value"
          @dblclick="unselect()"
        >
          <q-item-section>{{ item.label }}</q-item-section>
        </q-item>
      </q-list>
    </div>
  </cc-dialog>
</template>

<script>

export default {
  name: 'ListSelect',
  props: {
    unselectedList: {
      type: Array,
      required: true,
    },
    selectList: {
      type: Array,
      required: true,
    },
    msg: String,
  },
  data() {
    return {
      link: '',
    };
  },
  methods: {
    select() {
      if (this.link !== '') {
        const item = this.unselectedList.find((data) => this.link === data.value);
        if (item) {
          this.unselectedList.splice(this.unselectedList
            .findIndex((data) => this.link === data.value), 1);
          this.selectList.push(item);
        }
      }
    },
    unselect() {
      if (this.link !== '') {
        const item = this.selectList.find((data) => this.link === data.value);
        if (item) {
          this.selectList.splice(this.selectList.findIndex((data) => item.value === data.value), 1);
          this.unselectedList.push(item);
        }
      }
    },
    selectAll() {
      if (this.unselectedList.length > 0) {
        this.selectList = this.selectList.concat(this.unselectedList);
        this.unselectedList = [];
      }
    },
    unselectAll() {
      if (this.selectList.length > 0) {
        this.unselectedList = this.unselectedList.concat(this.selectList);
        this.selectList = [];
      }
    },
    show() {
      this.$refs.showDialog.show();
    },
    hide() {
      this.$refs.showDialog.hide();
    },
    save() {
      this.$emit('saveSelect', this.selectList);
    },
  },
  mounted() {
  },
};
</script>

<style lang="stylus"></style>
